<script setup lang="ts">
import { useUserInfoStore } from '@/store/userInfo'

// Assets
import modalSuccessIcon from '@/static/images/modal/success.png'
import { updateUserInfoInProjectAPI } from '@/apis/updateUserInfoInProject'

const router = useRouter()
const userInfoStore = useUserInfoStore()

const projectId = ref('')

// 表单数据
const formData = ref({
  name: '',
  mobile: '',
})

// 表单校验规则
const rules = {
  name: [
    { required: true, message: '姓名不可为空', trigger: ['blur', 'change'] },
  ],
  mobile: [
    { required: true, message: '手机号不可为空', trigger: ['blur', 'change'] },
  ],
}

onLoad((options) => {
  if (options && options.project_id && options.name && options.mobile) {
    projectId.value = options.project_id
    formData.value.name = options.name
    formData.value.mobile = options.mobile
  }
  else { uni.showToast({ title: '获取数据失败', icon: 'none' }) }
})

// 表单组件 ref
const formRef = ref<any>(null)
// loading 状态
const loading = ref(false)
// 是否显示表单提交成功弹窗
const isShowSuccessModal = ref(false)

const handleSubmit = useThrottleFn(() => {
  formRef.value.validate()
    .then(async () => {
      loading.value = true
      try {
        const res = await updateUserInfoInProjectAPI({
          project_id: projectId.value,
          contacts_name: formData.value.name,
          contacts_mobile: formData.value.mobile,
        }, userInfoStore.userInfo!.token!)
        if (res.data?.code === 1) {
          isShowSuccessModal.value = true
          loading.value = false
        }
        else { uni.showToast({ title: res.data?.msg, icon: 'none' }) }
      }
      catch (err) {
        uni.showToast({ title: JSON.stringify(err) })
      }
    })
    .catch((errors: AnyObject[]) => {
      if (errors.length > 0)
        uni.showToast({ title: errors[0].message, icon: 'none' })
    })
})

function handleExit() {
  router.back()
}
</script>

<template>
  <view class="min-h-screen bg-#F8F8F8">
    <Spacer height="30" />
    <uv-form ref="formRef" :model="formData" :rules="rules">
      <view class="mx-30rpx bg-white rounded-10rpx">
        <uv-form-item prop="name" :custom-style="{ padding: 0 }">
          <ListCell label="客户姓名">
            <ListInput v-model="formData.name" type="number" placeholder="请输入打款金额" />
          </ListCell>
        </uv-form-item>
        <Divider />
        <uv-form-item prop="mobile" :custom-style="{ padding: 0 }">
          <ListCell label="客户手机号">
            <ListInput v-model="formData.mobile" type="number" placeholder="请输入打款金额" />
          </ListCell>
        </uv-form-item>
      </view>
      <Spacer height="138" />
      <RGButton
        class="z-10 fixed bottom-80rpx x-center"
        @tap="handleSubmit"
      >
        保存
      </RGButton>
      <Spacer height="100" />
    </uv-form>
    <uv-overlay :show="isShowSuccessModal" @tap="handleExit">
      <uv-transition mode="zoom-in" :show="isShowSuccessModal">
        <view class="relative w-screen h-screen">
          <JZTModal
            :icon="modalSuccessIcon"
            title="提交成功"
            content=""
            button-label="确定"
            @confirm="handleExit"
          />
        </view>
      </uv-transition>
    </uv-overlay>
  </view>
</template>

<route lang="yaml">
name: 'updateUserInfoInProject'
style:
  navigationBarTitleText: '编辑信息'
layout: 'custom'
</route>
